/*So proud of it I am gonna put my name on it*/
/* Author: Sigurður Birkir Sigurðsson */

#end-screen {
    display: none;
    position: absolute;
    background: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    z-index: 10;
    min-height: 30em;
    box-shadow: 0 1px 2px rgb(200, 200, 200);
}

#end-screen-content {
    height: 100%;
    max-height: 30em;
}

#end-screen-overview {
    text-align: center;
    border-bottom: 1px solid #bfbfbf;
    padding-bottom: 0.5em;
    color: #484848;
    margin: 1em 3em 0;
}

#end-screen-content-left {
    height: 100%;
    width: 50%;
    float: left;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5em;
}

#end-screen-content-right {
    position: relative;
    height: 100%;
    width: 50%;
    float: left;

    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
}

#pose-and-background-wrapper {
    position: relative;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    /*TODO Enable below with javascript when no background is present to move end-title and prize-pose closer together*/
    margin-right: auto;
    margin-left: 2em;
}

#pose-wrapper {
    position: relative;
    /*max-height: 100%;*/
    /*max-width: 14em;*/
}

#pose-wrapper img{
    max-height: 100%;
    width: 14em; /*THIS CONTROLS THE SIZE OF THE PRIZE-POSE*/
}

#end-title {
    position: relative;
    text-align: center;

    /*TODO Enable below with javascript when no background is present to move end-title and prize-pose closer together*/
    margin-left: auto;
}

#end-screen-reward {
    /*TODO Set this depending on every prize with javascript*/
    /*width: 50px !important;*/
    /*top: 0;*/
    /*left: 40px;*/

    width: 100px !important;
    top: -20px;
    left: 5px;
}

#end-screen-reward-background {
    height: 90% !important;

    /* This is needed for iOS devices to center a absolute element because flex-box doesn't do the job*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
}

.continue-btn {
    font-size: 30px;
    border-radius: 2em;
    border: 3px solid rgb(108, 195, 108);
    margin: 23px 0 15px -22px;
}

.tryagain-btn {
    font-size: 18px;
    border-radius: 2em;
    border: 3px solid #f5ba66;
    margin: 0 2em 2em;
    padding: 5px 10px;
    display: flex;
}

.endscreen-signup-btn {
    font-size: 1.5em;
    /*border-radius: 2px;*/
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    margin: 0 0.2em;
    color: white;
    background: rgb(63, 197, 255);
    border-radius: 2em;
}

#prizeImg {
    width: 40px;
    float: left;
    margin: 12px 0px 0px 10px;
    display: block;
}
/************ MOBILE *************/
@media (max-width: 767px) {

    #end-screen {
        min-height: 35em;
    }

    #end-screen-content {
        max-height: none;
        margin-top: 1.5em;
    }

    #end-screen-overview {
        margin: 0 2em;
        padding: 0 0 0.1em;
    }

    #end-screen-content-left {
        width: 100%;
        height: 49%;
        max-height: 13em;
        padding: 0.75em;
    }

    #end-title {
        margin: 0 auto;
        top:2.75em;
        width: 100%;
    }

    #end-screen-content-right {
        /*width: 100%;*/
        align-self: flex-start;
        max-height: 20em;
        float: right;
    }

    #pose-and-background-wrapper {
        margin: 0 auto;
    }

    #pose-wrapper img{
        width: 13em; /*THIS CONTROLS THE SIZE OF THE PRIZE-POSE*/
    }

    .continue-btn {
        margin: 14px 0 5px;
        display: flex;
    }
    .tryagain-btn-btn {
        margin: 5px 0;
    }

    #prizeImg {
        margin: 1.25em 0 0 2px;
        width: 2em;
    }

}